<template>
  <div class="h-full flex flex-col">
    <vxe-card title="" class="w-full" :border="false">
      <div class="flex items-center">
        <div class="border-arrow" @click="toPrevPage">
          <FontIcon icon="icon-left" />
        </div>
        <div class="text-[#242930] ml-4">
          <span class="text-[--autata-font-gray-color]">操作记录</span>
        </div>
      </div>
    </vxe-card>

    <vxe-card title="" class="w-full mt-[16px]" :border="false">
      <AuForm
        ref="formRef"
        labelWidth="110px"
        :formList="formList"
        :hiddenBtn="true"
        @submit="search"
      />
    </vxe-card>

    <div class="mt-[16px] flex-grow overflow-hidden">
      <au-table
        ref="tableRef"
        v-bind="gridRecordOption"
        @actionClick="actionClick"
      >
        <template #store_default="{ row }">
          {{ storeKeyValue[row.storeId] }}
        </template>
      </au-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import { getStoreList } from "@/api/teaInfuser/store";
import { deviceLockRecord } from "@/api/teaInfuser/device";
import { useGlobal } from "@pureadmin/utils";
import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
import { emitter } from "@/utils/mitt";
import { AuTable } from "@/components/AuTable";
import { ACTION_TYPE, PropDefines } from "@/components/AuTable/type";
import { GetListParamProp } from "@/api/user";
import { AuForm } from "@/components/AuForm";
import { dateProps, selectProps } from "@/components/AuForm/type";

defineOptions({
  name: "StoreSupRecord"
});

const route = useRoute();
const { $storage } = useGlobal<GlobalPropertiesApi>();
const router = useRouter();

const tableRef = ref();
const storeKeyValue = ref({});
let deviceStatus = "";

const formList = ref<[dateProps, dateProps]>([
  {
    type: "date",
    label: "最后清洗时间",
    key: "clear_time",
    inType: "datetimerange",
    span: 8,
    rangeSeparator: "至",
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
    valueFormat: "YYYY-MM-DD HH:mm:ss",
    onChange: () => {
      search();
    }
  },
  {
    type: "date",
    label: "最后校准时间",
    key: "calibration_time",
    inType: "datetimerange",
    span: 8,
    rangeSeparator: "至",
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
    valueFormat: "YYYY-MM-DD HH:mm:ss",
    onChange: () => {
      search();
    }
  }
]);
const gridRecordOption = reactive<PropDefines>({
  isServerPage: false,
  columns: [
    { field: "device_id", title: "设备编码", width: 180 },
    { field: "store_name", title: "门店名称", showOverflow: false },
    { field: "clear_time", title: "最后清洗时间" },
    {
      field: "calibration_time",
      title: "最后校准时间",
      width: 180,
      showOverflow: false
    }
  ],
  dataSource: [],
  actions: [ACTION_TYPE.REFRESH, ACTION_TYPE.DOWNLOAD],
  fetchConfig: {
    query: {
      service: (
        params: GetListParamProp<{ version: string; deviceLockRecord: object }>
      ) => {
        const { start_page, size, ...rest } = params;
        console.log(rest);
        params = {
          start_page: start_page ?? 1,
          size: size ?? 0,
          deviceLockRecord: rest
        };

        // return deviceLockRecord(params);
        return new Promise(resolve => {
          resolve([]);
        });
      },
      param: () => {
        return {
          // deviceId: Number(route.query["id"]),
          deviceStatus: deviceStatus
          // ...formRef.value.getFormData()
        };
      }
    }
  }
});

const formRef = ref();

const toPrevPage = () => {
  router.go(-1);
};

const getStoreData = async () => {
  const res = await getStoreList({
    start_page: 1,
    size: 0
  });
  for (const item of res.data) {
    console.log(item);
    storeKeyValue.value[item.id] = item.name;
  }
};

function storageConfigureChange<T>(key: string, val: T): void {
  const storageConfigure = $storage.configure;
  storageConfigure[key] = val;
  // $storage.configure = storageConfigure;
}

const search = () => {
  tableRef.value.refresh();
};

const actionClick = ({ key }) => {
  switch (key) {
    case ACTION_TYPE.REFRESH:
      // search();
      break;
    case ACTION_TYPE.DOWNLOAD:
      const $table = tableRef.value.vxeGridRef;
      $table.exportData({
        filename: "设备操作记录",
        type: "csv",
        isHeader: true
      });
  }
};

onBeforeMount(() => {
  getStoreData();
});

// onMounted(() => {
//   storageConfigureChange("hideTabs", true);
//   emitter.emit("tagViewsChange", true as unknown as string);
// });
//
// onBeforeRouteLeave((to, from, next) => {
//   storageConfigureChange("hideTabs", false);
//   emitter.emit("tagViewsChange", false as unknown as string);
//   next();
// });
</script>

<style lang="scss" scoped>
.device-table {
  :deep(table) {
    background: #f5f9ff !important;
  }

  :deep(.el-table th.el-table__cell) {
    background: #f5f9ff;
  }

  :deep(.el-table tr) {
    background: #f5f9ff;
  }
}

:deep(.el-alert) {
  &.el-alert--error {
    &:hover {
      background: #fff;
    }
  }
}
</style>
